<template>
	<view class="account-page p-20">
		<u-cell-group :border="false" class="u-cell-group-all">
			<u-cell size="large" title="设置安全密码" :isLink="true"
				titleStyle="{font-size: 28prx}"
				rightIconStyle="font-size:24rpx" @click="toPage">
				<view slot="value" class="u-slot-value-sign">
					<text v-if="ifSetPassword">已设置</text>
					<view style="color:#333333;"v-else>
						<text class="circle"></text>
						未设置
					</view>
				</view>
			</u-cell>
			<u-cell size="large" title="注销账号" :isLink="true"
				titleStyle="{font-size: 28prx}"
				rightIconStyle="font-size:24rpx" @click="showPopup">
				<view slot="value" class="u-slot-value-sign">
					<text>注销后账号无法恢复，请谨慎操作</text>
				</view>
			</u-cell>
			<u-cell size="large" title="实名认证" :isLink="!user.isAttested"
				titleStyle="{font-size: 28prx}" @click="toPage('isAttested')">
				<view slot="value" class="u-slot-value-sign">
					<text v-if="ifSetPassword">已认证</text>
					<view style="color:#333333;"v-else>
						<text class="circle"></text>
						未认证
					</view>
				</view>
			</u-cell>
		</u-cell-group>
		<popup :title="popupName" ensure="下一步" ref="popupRef" @reserved="reserved"></popup>
		<tips-popup :popupShow="isShowAttested" subhead="您还未完成实名认证无法设置安全密码，是否前往实名认证？"
		confirmText="去认证" confirmBg="#000000" @popupHide="isShowAttested = false" @popupConfirm="goAttest"></tips-popup>
	</view>
</template>

<script>
	import popup from './common/popup.vue'
	import tipsPopup from '../community/common/currencyPopup.vue'
	import {mapState} from 'vuex'
	import {userIfSetPasswordApi} from '../../api/collection.js'
	export default {
		components: {
			popup,
			tipsPopup
		},
		data() {
			return {
				popupName: '',
				isShowAttested: false,
				ifSetPassword:false,
			}
		},
		onLoad() {
			this.getIfPassword()
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		methods: {
			showPopup() {
				this.$refs.popupRef.open()
				this.popupName = '是否要注销账号？'
			},
			reserved() {
				this.$refs.popupRef.close()

				uni.navigateTo({
					url: '../user/cancleAccount'
				})
			},
			toPage(e) {
				if(e == 'isAttested'){
					if (this.user.isAttested) {
						return false
					}
					uni.navigateTo({
						url: './realName'
					})
					return false
				}
				if (!this.user.isAttested) {
					this.isShowAttested = true
					return
				}
				uni.navigateTo({
					url: '../safe/index'
				})
				this.isShowAttested = false
			},

			//获取是否设置安全密码
			async getIfPassword(){
				try{
					uni.showLoading({
						title:'请稍后...',
						mask:true
					})
					const res = await userIfSetPasswordApi()
					this.ifSetPassword = res.data.isHasPhoto
					uni.hideLoading()
				}catch(e){
					//TODO handle the exception
					uni.hideLoading()
				}
			},

			goAttest() {
				uni.navigateTo({
					url: './realName'
				})
				this.isShowAttested = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account-page {
		.u-cell-group-all {
			font-size: 28rpx;

			.u-slot-value-sign {
				.circle{
					width: 9px;
					height: 9px;
					background: #EB5B33;
					border-radius: 50%;
					display: inline-block;
					margin-right: 8rpx;
				}
				font-size: 24rpx;
				color: #B3B4B5;
				display: flex;
				align-items: center;
			}

			::v-deep .u-cell__body--large {
				padding: 50rpx 0;
				.u-cell__title-text--large[data-v-1c4434ae] {
					font-weight: bold;
				}
			}
		}

		::v-deep .popup-box .popup-bottom .popup-bottom-right {
			background-color: red;
		}

		::v-deep .u-cell__right-icon-wrap {
			margin-left: 30rpx;
			margin-top: 2rpx;
		}
	}
</style>
